<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>forceupdate</title>
  </head>
  <body>
    <div id="app">
      <button @click="clearList">改变数据长度清空数组</button>
      <button @click="addObjParams">给对象数组添加一个字段</button>
      <button @click="changeObjParams">改变对象下的属性值</button>
      <ul>
        <li v-for="item of list" :key="item">{{ item }}</li>
      </ul>
      {{ arr[2].a }} {{ arr[2].b }} {{ arr[2].c }}
      <div>{{ obj }} - {{ obj.a.d }}</div>
    </div>
  </body>
  <script src="../lib/vue.js"></script>
  <script>
    new Vue({
      data: {
        list: ["a", "b", "c"],
        arr: [
          { a: 1, b: 1 },
          { a: 11, b: 11 },
          { a: 111, b: 111 },
        ],
        obj: {
          a: {
            b: 2,
          },
        },
      },
      methods: {
        clearList() {
          /* this.list.length = 0;
          console.log(this.list);
          this.$forceUpdate(); */
          this.list = [];
        },
        addObjParams() {
          /* this.arr[2].c = 300;
          console.log(this.arr);
          this.$forceUpdate(); */
          this.$set(this.arr[2], "c", 500);
        },
        changeObjParams() {
          // this.obj = {a: {b:22}}
          // this.obj.a = { b: 222 }
          // this.obj.a.b = 222
          /* this.obj.a.d = 666; // 新添加的属性不具备响应式
          console.log(this.obj);
          this.$forceUpdate(); */

          this.$set(this.obj.a, "d", "666");
        },
      },
    }).$mount("#app");
  </script>
</html>
